<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="../stylesheets/screen.css"/>
    <link rel="stylesheet" href="../stylesheets/libs/css/font-awesome.min.css"/>
</head>
<body>
<div class="top-bar">
    <div class="container">

        <div class="bar-info">
            <a href="#" class="shopping-cart">
                <i class="fa fa-shopping-cart"></i> 购物车（0）
            </a>
        </div>
        <div class="bar-info">
            <a href="#">登陆</a>
            <span class="sep">|</span>
            <a href="#">注册</a>
        </div>

    </div>
</div>

<div class="header-bar">
    <div class="container">

        <div class="logo">
            <a href="#">R</a>
        </div>

        <div class="nav">
            <ul class="menu">
                <li><a href="">手机</a></li>
                <li><a href="">智能硬件</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">手环</a></li>
                <li><a href="">服务</a></li>
            </ul>
        </div>

        <div class="search">
            <input type="text"/>
            <button><i class="fa fa-search"></i></button>
        </div>

    </div>


</div>

<div class="special">
    <div class="container">
        <div class="slider"></div>
        <div class="primary-recommend">
            <div class="header">
                <div class="title">明星产品</div>
                <div class="pager">
                    <div class="active" id="recommend-left"><i class="fa fa-angle-left"></i></div>
                    <div id="recommend-right"><i class="fa fa-angle-right"></i></div>
                </div>
            </div>
            <div class="body">
                <ul id="recommend-list">
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999元起</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米电视2S 48英寸影院版</div>
                        <div class="desc">美国ADI传感器，30天超长续航</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-3.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">3999元</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-4.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-5.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div></a>
                    </li>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href=""><img src="../images/goods-3.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-4.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-5.jpg"></a></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="container">
        <div class="category">
            <div class="header">
                <div class="title">智能硬件</div>
                <div class="view-all">
                    <a href=""> 查看全部<i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="body">
                <ul>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999元起</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米电视2S 48英寸影院版</div>
                        <div class="desc">美国ADI传感器，30天超长续航</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-3.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">3999元</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-4.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-5.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div></a>
                    </li>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href=""><img src="../images/goods-3.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-4.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-5.jpg"></a></a></li>
                </ul>
            </div>
        </div>
        <div class="category">
            <div class="header">
                <div class="title">智能硬件</div>
                <div class="view-all">
                    <a href=""> 查看全部<i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="body">
                <ul>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999元起</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米电视2S 48英寸影院版</div>
                        <div class="desc">美国ADI传感器，30天超长续航</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-3.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">3999元</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-4.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-5.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                        <div class="comment">
                            <div class="detail">原厂就是原厂，质量非常好，摸上去手感很细腻，质量非常好，摸上去手.</div>
                            <div class="author">来自于 <span>renshan</span> 的评价</div>
                        </div>
                    </a></li>
                    <li><a href=""><img src="../images/goods-3.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-4.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-5.jpg"></a></a></li>
                </ul>
            </div>
        </div>
        <div class="category">
            <div class="header">
                <div class="title">智能硬件</div>
                <div class="view-all">
                    <a href=""> 查看全部<i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="body">
                <ul>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999元起</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米电视2S 48英寸影院版</div>
                        <div class="desc">美国ADI传感器，30天超长续航</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-3.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">3999元</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-4.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-5.jpg"><div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div></a>
                    </li>
                    <li><a href="">
                        <img src="../images/goods-1.jpg">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href="">
                        <img src="../images/goods-2.png">
                        <div class="title">小米4</div>
                        <div class="desc">工艺和手感超乎想象</div>
                        <div class="price">1999</div>
                    </a></li>
                    <li><a href=""><img src="../images/goods-3.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-4.jpg"></a></a></li>
                    <li><a href=""><img src="../images/goods-5.jpg"></a></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="footer-links">
            <div class="link-group">
                <div class="title">帮助中心</div>
                <a href="">购物指南</a>
                <a href="">支付方式</a>
                <a href="">配送方式</a>
            </div>
            <div class="link-group">
                <div class="title">服务支持</div>
                <a href="">相关政策</a>
                <a href="">自助服务</a>
                <a href="">相关知识</a>
            </div>
            <div class="link-group">
                <div class="title">关注我们</div>
                <a href="">新浪微博</a>
                <a href="">腾讯微信</a>
            </div>
            <div class="service-contact">
                <div class="title">服务电话</div>
                <div class="tel">159855221155</div>
                <span>周一至周日 8:00-18:00 </span>
            </div>
        </div>

    </div>
</div>

<script>
    var left = document.getElementById('recommend-left');
    var right = document.getElementById('recommend-right');
    var target = document.getElementById('recommend-list');

    left.addEventListener('click', function(e){
        target.style.transitionDuration = ".45s";
        target.style.marginLeft = "0px";
    })

    right.addEventListener('click', function(e){
        target.style.transitionDuration = ".45s";
        target.style.marginLeft = "-1240px";
    })


</script>
</body>
</html>